<template>
  <el-dialog title="详细" :close-on-click-modal="false" :visible.sync="visible" width="90%" >
    <el-row :gutter="20">
      <el-col :span="20">
        <div id="despatbox">
          <el-form :inline="true" :label-position="labelPosition" :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
            <table width="100%">
            <tr>
            <td class="tablebox"><el-form-item label="船员编号：">
              {{dataForm.crewNum}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="姓名：">
              {{dataForm.crewName}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="职务：">
              {{dataForm.crewPost}}
              <!-- <el-select class="width400" v-model="dataForm.crewPost" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsCrewPost"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="证件类型：">
              {{dataForm.documentType}}
              <!-- <el-select v-model="dataForm.documentType" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsDocumentType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="证件号：">
              {{dataForm.documentNumber}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="出生日期：">
              {{dataForm.birthday}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="性别：">
              {{dataForm.sex === 0 ? '男' : '女'}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="手机号：">
              {{dataForm.phoneNumber}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="船员状态：">
              {{dataForm.crewStatus}}
              <!-- <el-select v-model="dataForm.crewStatus" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsCrewStatus"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="推荐人：">
              {{dataForm.recommenderId}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="国籍：">
              {{dataForm.nationality}}
              <!-- <el-select v-model="dataForm.nationality" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsNationality"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="证书等级：">
              {{dataForm.certificateLevel}}
              <!-- <el-select v-model="dataForm.certificateLevel" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsCertificateLevel"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="备注：">
              {{dataForm.remarks}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="家庭地址：">
              {{dataForm.homeAddress}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="出生地：">
              {{dataForm.birthPlace}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="船员类型：">
              {{dataForm.crewType}}
              <!-- <el-select v-model="dataForm.crewType" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsCrewType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="政治面貌：">
              {{dataForm.political}}
              <!-- <el-select v-model="dataForm.political" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsPolitical"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="婚姻状况：">
              {{dataForm.maritalStatus}}
              <!-- <el-select v-model="dataForm.maritalStatus" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsMaritalStatus"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="血型：">
              {{dataForm.bloodType}}
              <!-- <el-select v-model="dataForm.bloodType" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsBloodType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="航海经验：">
              {{dataForm.experienceSailing}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="遣返地：">
              {{dataForm.repatriationArea}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="特殊技能：">
              {{dataForm.technicalSkill}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="其他联络电话：">
              {{dataForm.otherPhone}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="通讯地址：">
            {{dataForm.postalAddress}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="电子邮箱：">
              {{dataForm.email}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="紧急联络人：">
              {{dataForm.emergencyContact}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="与本人关系：">
              {{dataForm.relationship}}
              <!-- <el-select v-model="dataForm.relationship" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsRelationship"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="关系人手机号：">
              {{dataForm.relationshipPhone}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="关系人其他电话：">
              {{dataForm.relationshipOtherPhone}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="毕业院校：">
              {{dataForm.school}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="最高学历：">
              {{dataForm.education}}
              <!-- <el-select v-model="dataForm.education" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsEducation"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="学历证号：">
              {{dataForm.certificate}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="毕业时间：">
              {{dataForm.graduationTime}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="专业：">
              {{dataForm.major}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="英文水平：">
              {{dataForm.englishProficiency}}
              <!-- <el-select v-model="dataForm.englishProficiency" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsEnglishProficiency"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="其他语种：">
              {{dataForm.otherLanguages}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="语言水平：">
              {{dataForm.otherLanguageProficiency}}
              <!-- <el-select v-model="dataForm.otherLanguageProficiency" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsOtherLanguageProficiency"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="寻求职务：">
              {{dataForm.seekingJob}}
              <!-- <el-input v-model="dataForm.seekingJob" placeholder="寻求职务"></el-input>
              <el-select v-model="dataForm.seekingJob" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsSeekingJob"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="船舶类型：">
              {{dataForm.shipType}}
              <!-- <el-select v-model="dataForm.shipType" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsShipType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="航区：">
              {{dataForm.navigationArea}}
              <!-- <el-select v-model="dataForm.navigationArea" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsNavigationArea"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="载重吨位：">
              {{dataForm.deadweightTonnage}}
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="薪资要求：">
              {{dataForm.salaryEquirement}}
            </el-form-item></td>
            </tr>
            <tr>
            <td class="tablebox"><el-form-item label="币种：">
              {{dataForm.currency}}
              <!-- <el-select v-model="dataForm.currency" class="width400" placeholder="请选择" :disabled="!detailsBox">
                <el-option
                  v-for="item in optionsCurrency"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> -->
            </el-form-item></td>
            <td class="tablebox"><el-form-item label="其他要求：">
              {{dataForm.otherRequirements}}
            </el-form-item></td>
            <td class="tablebox">&nbsp;</td>
            </tr>
          </table>
            <div style="border:1px solid #EBEEF5;">
              <el-table :data="dataForm.experience_list" boeder style="width: 100%;">
                <el-table-column prop="startTime" label="起始时间" > </el-table-column>
                <el-table-column prop="endTime" label="终止时间" > </el-table-column>
                <el-table-column prop="crewPostex" label="职务" > </el-table-column>
                <el-table-column prop="companyName" label="公司名称" > </el-table-column>
                <el-table-column prop="vesselName" label="船舶名称" > </el-table-column>
                <el-table-column prop="shipTypeex" label="船舶类型" > </el-table-column>
                <el-table-column prop="shipownerName" label="船东名称" > </el-table-column>
                <el-table-column prop="shipTypeex" label="船舶类型" > </el-table-column>
                <el-table-column prop="hostModel" label="主机型号" > </el-table-column>
                <el-table-column prop="navigationAreaex" label="航区" > </el-table-column>
              </el-table>
            </div>
          </el-form>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="photo"><i class="el-icon-picture-outline" style="margin-top:60px;"></i></div>
      </el-col>
    </el-row>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dataVariety: {
      type: Boolean
    },
    detailsBox: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      dataForm: {
        crewId: 0,
        crewNum: "",
        crewName: "",
        crewPost: "",
        crewStatus: "",
        nationality: "",
        certificateLevel: "",
        remarks: "",
        phoneNumber: "",
        homeAddress: "",
        recommenderId: "",
        createTime: "",
        birthPlace: "",
        documentType: "",
        documentNumber: "",
        birthday: "",
        sex: 0,
        crewType: "",
        political: "",
        maritalStatus: "",
        bloodType: "",
        experienceSailing: "",
        repatriationArea: "",
        technicalSkill: "",
        otherPhone: "",
        postalAddress: "",
        email: "",
        emergencyContact: "",
        relationship: "",
        relationshipPhone: "",
        relationshipOtherPhone: "",
        createUserIp: "",
        affiliatedCompanyId: "",
        createUserId: "",
        school: "",
        education: "",
        certificate: "",
        graduationTime: "",
        major: "",
        englishProficiency: "",
        otherLanguages: "",
        otherLanguageProficiency: "",
        seekingJob: "",
        shipType: "",
        navigationArea: "",
        deadweightTonnage: "",
        salaryEquirement: "",
        currency: "",
        otherRequirements: "",
        experience_list: [
          {
            startTime: "",
            endTime: "",
            crewPostex: "",
            companyName: "",
            vesselName: "",
            shipownerName: "",
            shipTypeex: "",
            hostModel: "",
            navigationAreaex: ""
          }
        ]
      },
      labelPosition: 'right',
      optionsCrewPost: [],
      optionsCrewStatus: [],
      optionsNationality: [],
      optionsCertificateLevel: [],
      optionsDocumentType: [],
      optionsSex: [],
      optionsCrewType: [],
      optionsPolitical: [],
      optionsMaritalStatus: [],
      optionsBloodType: [],
      optionsRelationship: [],
      optionsAffiliatedCompanyId: [],
      optionsEducation: [],
      optionsEnglishProficiency: [],
      optionsOtherLanguageProficiency: [],
      optionsSeekingJob: [],
      optionsShipType: [],
      optionsNavigationArea: [],
      optionsCurrency: []
    };
  },
  watch: {
    dataVariety() {
      this.dataForm = {
        crewId: 0,
        crewNum: "",
        crewName: "",
        crewPost: "",
        crewStatus: "",
        nationality: "",
        certificateLevel: "",
        remarks: "",
        phoneNumber: "",
        homeAddress: "",
        recommenderId: "",
        createTime: "",
        birthPlace: "",
        documentType: "",
        documentNumber: "",
        birthday: "",
        sex: 0,
        crewType: "",
        political: "",
        maritalStatus: "",
        bloodType: "",
        experienceSailing: "",
        repatriationArea: "",
        technicalSkill: "",
        otherPhone: "",
        postalAddress: "",
        email: "",
        emergencyContact: "",
        relationship: "",
        relationshipPhone: "",
        relationshipOtherPhone: "",
        createUserIp: "",
        affiliatedCompanyId: "",
        createUserId: "",
        school: "",
        education: "",
        certificate: "",
        graduationTime: "",
        major: "",
        englishProficiency: "",
        otherLanguages: "",
        otherLanguageProficiency: "",
        seekingJob: "",
        shipType: "",
        navigationArea: "",
        deadweightTonnage: "",
        salaryEquirement: "",
        currency: "",
        otherRequirements: "",
        experience_list: [
          {
            startTime: "",
            endTime: "",
            crewPostex: "",
            companyName: "",
            vesselName: "",
            shipownerName: "",
            shipTypeex: "",
            hostModel: "",
            navigationAreaex: ""
          }
        ]
      }
    }
  },
  methods: {
    init(id, iStatus) {
      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewPost = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${2}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewStatus = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${3}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNationality = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${7}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCertificateLevel = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${5}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsDocumentType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${8}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${9}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsPolitical = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${10}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsMaritalStatus = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${11}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsBloodType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${12}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsRelationship = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl("/generator/affiliatedcompanyinfo/select"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsAffiliatedCompanyId =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${13}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsEducation = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${14}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsEnglishProficiency =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${14}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsOtherLanguageProficiency =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsSeekingJob = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${15}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsShipType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${16}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNavigationArea = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${18}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCurrency = data && data.code === 0 ? data.list : [];
      });

      this.dataForm.crewId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.crewId) {
          console.log('this.dataForm.dispatchId', this.dataForm.crewId)
          this.$http({
            url: this.$http.adornUrl(
              `/generator/crewinfo/info/${this.dataForm.crewId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              console.log(data.crewInfo)
              this.dataForm.crewNum = data.crewInfo.crewNum;
              this.dataForm.crewName = data.crewInfo.crewName;
              this.dataForm.crewPost = data.crewInfo.crewPost;
              this.dataForm.crewStatus = data.crewInfo.crewStatus;
              this.dataForm.nationality = data.crewInfo.nationality;
              this.dataForm.certificateLevel = data.crewInfo.certificateLevel;
              this.dataForm.remarks = data.crewInfo.remarks;
              this.dataForm.phoneNumber = data.crewInfo.phoneNumber;
              this.dataForm.homeAddress = data.crewInfo.homeAddress;
              this.dataForm.recommenderId = data.crewInfo.recommenderId;
              this.dataForm.createTime = data.crewInfo.createTime;
              this.dataForm.birthPlace = data.crewInfo.birthPlace;
              this.dataForm.documentType = data.crewInfo.documentType;
              this.dataForm.documentNumber = data.crewInfo.documentNumber;
              this.dataForm.birthday = data.crewInfo.birthday;
              this.dataForm.sex = data.crewInfo.sex;
              this.dataForm.crewType = data.crewInfo.crewType;
              this.dataForm.political = data.crewInfo.political;
              this.dataForm.maritalStatus = data.crewInfo.maritalStatus;
              this.dataForm.bloodType = data.crewInfo.bloodType;
              this.dataForm.experienceSailing = data.crewInfo.experienceSailing;
              this.dataForm.repatriationArea = data.crewInfo.repatriationArea;
              this.dataForm.technicalSkill = data.crewInfo.technicalSkill;
              this.dataForm.otherPhone = data.crewInfo.otherPhone;
              this.dataForm.postalAddress = data.crewInfo.postalAddress;
              this.dataForm.email = data.crewInfo.email;
              this.dataForm.emergencyContact = data.crewInfo.emergencyContact;
              this.dataForm.relationship = data.crewInfo.relationship;
              this.dataForm.relationshipPhone = data.crewInfo.relationshipPhone;
              this.dataForm.relationshipOtherPhone =
                data.crewInfo.relationshipOtherPhone;
              this.dataForm.createUserIp = data.crewInfo.createUserIp;
              this.dataForm.affiliatedCompanyId =
                data.crewInfo.affiliatedCompanyId;
              this.dataForm.createUserId = data.crewInfo.createUserId;
              this.dataForm.school = data.crewInfo.school;
              this.dataForm.education = data.crewInfo.education;
              this.dataForm.certificate = data.crewInfo.certificate;
              this.dataForm.graduationTime = data.crewInfo.graduationTime;
              this.dataForm.major = data.crewInfo.major;
              this.dataForm.englishProficiency =
                data.crewInfo.englishProficiency;
              this.dataForm.otherLanguages = data.crewInfo.otherLanguages;
              this.dataForm.otherLanguageProficiency =
                data.crewInfo.otherLanguageProficiency;
              this.dataForm.seekingJob = data.crewInfo.seekingJob;
              this.dataForm.shipType = data.crewInfo.shipType;
              this.dataForm.navigationArea = data.crewInfo.navigationArea;
              this.dataForm.deadweightTonnage = data.crewInfo.deadweightTonnage;
              this.dataForm.salaryEquirement = data.crewInfo.salaryEquirement;
              this.dataForm.currency = data.crewInfo.currency;
              this.dataForm.otherRequirements = data.crewInfo.otherRequirements;
              this.dataForm.startTime = data.crewInfo.startTime;
              this.dataForm.endTime = data.crewInfo.endTime;
              this.dataForm.crewPostex = data.crewInfo.crewPostex;
              this.dataForm.companyName = data.crewInfo.companyName;
              this.dataForm.vesselName = data.crewInfo.vesselName;
              this.dataForm.shipownerName = data.crewInfo.shipownerName;
              this.dataForm.shipTypeex = data.crewInfo.shipTypeex;
              this.dataForm.hostModel = data.crewInfo.hostModel;
              this.dataForm.navigationAreaex = data.crewInfo.navigationAreaex;
              this.dataForm.experience_list = data.crewInfo.experience_list;
              if (iStatus === 0) {
                this.visibleSubmit = "";
              } else {
                this.visibleSubmit = "none";
              }
            }
          });
        }
      });
    },

    addItem() {
      this.dataForm.experience_list.push({
        startTime: "",
        endTime: "",
        crewPostex: "",
        companyName: "",
        vesselName: "",
        shipownerName: "",
        shipTypeex: "",
        hostModel: "",
        navigationAreaex: ""
      });
    },

    deleteItems(item, index) {
        this.index = this.dataForm.experience_list.indexOf(item);
        if (index !== -1) {
          this.dataForm.experience_list.splice(index, 1)
        }
      },

    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/crewinfo/${!this.dataForm.crewId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              crewId: this.dataForm.crewId || undefined,
              crewNum: this.dataForm.crewNum,
              crewName: this.dataForm.crewName,
              crewPost: this.dataForm.crewPost,
              crewStatus: this.dataForm.crewStatus,
              nationality: this.dataForm.nationality,
              certificateLevel: this.dataForm.certificateLevel,
              remarks: this.dataForm.remarks,
              phoneNumber: this.dataForm.phoneNumber,
              homeAddress: this.dataForm.homeAddress,
              recommenderId: this.dataForm.recommenderId,
              createTime: this.dataForm.createTime,
              birthPlace: this.dataForm.birthPlace,
              documentType: this.dataForm.documentType,
              documentNumber: this.dataForm.documentNumber,
              birthday: this.dataForm.birthday,
              sex: this.dataForm.sex,
              crewType: this.dataForm.crewType,
              political: this.dataForm.political,
              maritalStatus: this.dataForm.maritalStatus,
              bloodType: this.dataForm.bloodType,
              experienceSailing: this.dataForm.experienceSailing,
              repatriationArea: this.dataForm.repatriationArea,
              technicalSkill: this.dataForm.technicalSkill,
              otherPhone: this.dataForm.otherPhone,
              postalAddress: this.dataForm.postalAddress,
              email: this.dataForm.email,
              emergencyContact: this.dataForm.emergencyContact,
              relationship: this.dataForm.relationship,
              relationshipPhone: this.dataForm.relationshipPhone,
              relationshipOtherPhone: this.dataForm.relationshipOtherPhone,
              createUserIp: this.dataForm.createUserIp,
              affiliatedCompanyId: this.dataForm.affiliatedCompanyId,
              createUserId: this.dataForm.createUserId,
              school: this.dataForm.school,
              education: this.dataForm.education,
              certificate: this.dataForm.certificate,
              graduationTime: this.dataForm.graduationTime,
              major: this.dataForm.major,
              englishProficiency: this.dataForm.englishProficiency,
              otherLanguages: this.dataForm.otherLanguages,
              otherLanguageProficiency: this.dataForm.otherLanguageProficiency,
              seekingJob: this.dataForm.seekingJob,
              shipType: this.dataForm.shipType,
              navigationArea: this.dataForm.navigationArea,
              deadweightTonnage: this.dataForm.deadweightTonnage,
              salaryEquirement: this.dataForm.salaryEquirement,
              currency: this.dataForm.currency,
              otherRequirements: this.dataForm.otherRequirements,
              startTime: this.dataForm.startTime,
              endTime: this.dataForm.endTime,
              crewPostex: this.dataForm.crewPostex,
              companyName: this.dataForm.companyName,
              vesselName: this.dataForm.vesselName,
              shipownerName: this.dataForm.shipownerName,
              shipTypeex: this.dataForm.shipTypeex,
              hostModel: this.dataForm.hostModel,
              navigationAreaex: this.dataForm.navigationAreaex,
              experience_list: this.dataForm.experience_list
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style>
#despatbox .el-form-item{
  margin-bottom: 0;
}
#despatbox .el-form-item::before, #despatbox .el-form-item::after{
  display: none;
}
#despatbox .el-form--inline .el-form-item__content{
      vertical-align: initial;
      display: contents;
}
#despatbox .el-form-item__content::after, #despatbox .el-form-item__content::before{
  display: none;
}
.photo{
  background: #EBEEF5;
  height: 200px;
  border-radius: 10px;
  text-align: center;
  font-size: 40px;
}
.tablebox{
  border-bottom: 1px dashed #F2F6FC;
  width: 33%;
}
</style>